<template>
  <Modal title="弹幕管理"
         id="barrage-management"
         width="600px"
         :fullscreen="true"
         footer-hide
         :mask-closable="false"
         v-model="visible"
         okText="保存">
    <Form :model="dataForm"
                inline
                label-position="left"
                :label-width="60">
                <FormItem label="弹幕内容"
                        class="inputcommon">
                <Input v-model="dataForm.content"
                       clearable></Input>
              </FormItem>
              <FormItem>
                <Button type="primary"
                            @click="getList">查询</Button>
              </FormItem>
          </Form>
          <Table :loading="dataListLoading"
                 border
                 :columns="columns"
                 :data="data"></Table>
          <div class="page">
            <Page @on-change="currentChangeHandle"
                  :total="totalPage"
                  :page-size="pageSize" />
          </div>

  </Modal>
</template>

<script>
import { getbarragemessage,delBarrageMessage } from '@/api/management.js'

export default {
  data () {
    return {
      barrageData:'',
      visible: false,
      columns: [
        {
          title: '发布人',
          key: 'userName',
          render: (h, params) => {
            return h('div', [
              h('strong', params.row.userName)
            ])
          }
        },
        {
          title: '发布时间',
          key: 'createTime'
        },
        {
          title: '弹幕内容',
          key: 'content'
        },
        {
          title: '操作',
          key: 'action',
          width: 150,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.remove(params.row.messageId)
                    }
                  }
                },
                '删除'
              )
            ])
          }
        }
      ],
      data: [
      ],
      dataForm: {
        content: '',
        
      },
      pageNum:1,
      pageSize:10,
      totalPage:0,
      dataListLoading: false
    }
  },
  components: {

  },
  methods: {
    init (row) {
      this.barrageData=row
      this.visible = true
      this.getList()
    },
    // 表单提交
    save () {

    },
    getList(){
      console.log(this.barrageData)
      let data={
        courseId:this.barrageData.courseId,
        content:this.dataForm.content,
        pageNum:this.pageNum,
        pageSize:this.pageSize
      }
      this.dataListLoading=true
      getbarragemessage(data).then(res=>{
        this.data=res.data.rows
        this.totalPage=res.data.total
        this.dataListLoading=false
      })
    },
    // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val
      this.getList()
    },
    remove(id){
       this.$Modal.confirm({
        title: '提示',
        content: '<p>是否对该弹幕进行删除操作</p>',
        loading: true,
        onOk: () => {
          delBarrageMessage(id).then(res=>{
            if(res.data){
              this.$Message.info('弹幕删除成功')
              this.getList()
            }else{
              this.$Message.info('弹幕删除失败')
            }
            this.$Modal.remove()
          })
        }
      })
      
    }
  }
}
</script>
<style lang="scss">
#barrage-management{
  .page{
    text-align:center;
    margin-top:10px;
  }
}
</style>